import { TabBar, Button, NavBar } from 'antd-mobile';
import React, { Component } from 'react';
import { connect } from 'dva';

import HomePage from '../routes/HomePage';
import CategoryPage from '../routes/CategoryPage';
import CartPage from '../routes/CartPage';
import UserPage from '../routes/UserPage';

class MainTab extends Component {

    render() {

        const {
            tab: {
                selectedIndex,
                hidden
            }
        } = this.props;

        return (
            <div>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#FA6060"
                    barTintColor="white"
                    hidden={hidden}
                >
                    <TabBar.Item
                        title="首页"
                        key="首页"
                        selected={selectedIndex === 0}
                        icon={require('../images/icon_tabbar_home@3x.png')}
                        selectedIcon={require('../images/icon_tabbar_home_selected@3x.png')}
                        onPress={() => {
                            this.props.dispatch({
                                type:'tab/changeIndex',
                                payload: 0
                            });
                        }}
                    >
                        <HomePage />
                    </TabBar.Item>
                    <TabBar.Item
                        title="分类"
                        key="分类"
                        selected={selectedIndex === 1}
                        icon={require('../images/icon_tabbar_category@3x.png')}
                        selectedIcon={require('../images/icon_tabbar_category_selected@3x.png')}
                        onPress={() => {
                            this.props.dispatch({
                                type:'tab/changeIndex',
                                payload: 1
                            });
                        }}
                    >
                        <CategoryPage />
                    </TabBar.Item>
                    <TabBar.Item
                        title="购物车"
                        key="购物车"
                        selected={selectedIndex === 2}
                        icon={require('../images/icon_tabbar_cart@3x.png')}
                        selectedIcon={require('../images/icon_tabbar_cart_selected@3x.png')}
                        onPress={() => {
                            this.props.dispatch({
                                type:'tab/changeIndex',
                                payload: 2
                            });
                        }}
                    >
                        <CartPage />
                    </TabBar.Item>
                    <TabBar.Item
                        title="我的"
                        key="我的"
                        selected={selectedIndex === 3}
                        icon={require('../images/icon_tabbar_user@3x.png')}
                        selectedIcon={require('../images/icon_tabbar_user_selected@3x.png')}
                        onPress={() => {
                            this.props.dispatch({
                                type:'tab/changeIndex',
                                payload: 3
                            });
                        }}
                    >
                        <UserPage />
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }

}

function mapStateToProps({tab}) {
    return {tab};
}

export default connect(mapStateToProps)(MainTab);


